<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">
          <!--          <el-form-item label="客户类型" prop="customerType">-->
          <!--            <el-select v-model="listQuery.customerType"-->
          <!--                       placeholder="请选择类型">-->
          <!--              <el-option v-for="item in customerTypeList"-->
          <!--                         :key="item.value"-->
          <!--                         :label="item.customerType"-->
          <!--                         :value="item.value">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="客户名称">
            <el-input v-model="listQuery.customerName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>
          <el-form-item label="联系人姓名">
            <el-input v-model="listQuery.customerLinkman"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>
          <el-form-item label="客户描述">
            <el-input v-model="listQuery.misc"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>

        </div>
        <div class="right-box">
          <el-button size="mini"
                     @click="handleFilter">查询
          </el-button>
          <el-button size="mini"
                     @click="reset" type="info">重置
          </el-button>
          <el-button size="mini"
                     type="success" @click="handleCreate">新增
          </el-button>
        </div>
      </template>
    </search-box>


    <div class="table-wrap" id="calendar">


      <el-calendar :first-day-of-week="7">
        <template slot="dateCell" slot-scope="{ date,data }">
          <div style="width: 100%;height: 100%;" @click="dialogVisible = data.isSelected" @dblclick="getDayLogsList">
            <p>{{ data.day.split('-').slice(2).join('-') }}<br/></p>

            <div
              v-for="(item, index) in calendarData"
              :key="index"
            >
              <div v-if="data.day == item.day">
                {{item.status}}
              </div>
            </div>
          </div>


          <div>
            <el-dialog
              :title="dialogTitle"
              :visible.sync="data.isSelected ? dialogVisible : false"
              width="30%"
              :before-close="handleClose"
            >
              <el-form ref="form" :rules="rules" :model="form" label-width="120px">


                <table width="100%" border="1px" cellspacing="0" bgcolor="#000000;">
                  <tr style="height: 40px;text-align: center;line-height: 40px">
                    <td bgcolor="#FFFFFF" style="color: #999999">日期</td>
                    <td bgcolor="#FFFFFF">{{data.day}}</td>
                    <td bgcolor="#FFFFFF" style="color: #999999">考勤</td>
                    <td bgcolor="#FFFFFF">{{data.day}}</td>
                  </tr>
                  <tr style="height: 400px;text-align: center;line-height: 40px">
                    <td bgcolor="#FFFFFF" style="color: #999999">日志</td>

                    <td bgcolor="#FFFFFF" colspan="3">
                      <span v-for="(item,index) in DayLogsList" v-if="item.dayLogTime == data.day">{{item.dayLogs}}<br></span>
                    </td>

                  </tr>
                </table>

              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="onDayLogs">日 志</el-button>
              </span>
            </el-dialog>


          </div>


          <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisibleDayLog"
            width="30%"
            style="margin-top: -5%"
          >
            <el-form ref="form" :rules="rules" :model="form" label-width="120px">

              <el-form-item label="日志类型" prop="dayLogType">
                <el-select v-model="form.dayLogType"
                           placeholder="请选择类型">
                  <el-option v-for="item in dayLogTypeList"
                             :key="item.dayLogType"
                             :label="item.dayLogType"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日志内容" prop="dayLogs">
                <el-input v-model="form.dayLogs" type="textarea" :rows="5"></el-input>
              </el-form-item>


              <el-form-item label="项目部门">
                <el-select v-model="form.proDepartment" @change="getProList"
                           placeholder="请选择日志所属项目部门">
                  <el-option v-for="item in departmentList"
                             :key="item.departmentName"
                             :label="item.departmentName"
                             :value="item.departmentName">
                  </el-option>
                </el-select>

              </el-form-item>

              <el-form-item label="项目名称" prop="proName">
                <el-select v-model="form.proName" filterable placeholder="请选择">
                  <el-option
                    v-for="item in proList"
                    :key="item.proCode"
                    :label="item.proName"
                    :value="item.proName">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="日志日期" prop="dayLogTime">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.dayLogTime" style="width: 100%;"
                                value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>

              <el-form-item label="日志受理人部门">

                <el-select v-model="form.departmentName1" @change="getUsersList"
                           placeholder="请选择日志受理人部门">
                  <el-option v-for="item in departmentList"
                             :key="item.departmentName"
                             :label="item.departmentName"
                             :value="item.departmentName">
                  </el-option>
                </el-select>

              </el-form-item>
              <el-form-item label="日志受理人" prop="receiverPeople">
                <el-select v-model="form.receiverPeople"
                           placeholder="请选择日志受理人">
                  <el-option v-for="item in usersList"
                             :key="item.userName"
                             :label="item.userName"
                             :value="item.userName">
                  </el-option>
                </el-select>

              </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
          </el-dialog>

        </template>
      </el-calendar>
      <div style="margin-right: 10px;float: right;font-size: 14px;color: #999999">
        * 双击日期查看当日明细
      </div>


    </div>


    <!--    <el-dialog-->
    <!--      :title="dialogTitle"-->
    <!--      :visible.sync="dialogVisible"-->
    <!--      width="30%"-->
    <!--      style="margin-top: -5%"-->
    <!--    >-->
    <!--      <el-form ref="form" :rules="rules" :model="form" label-width="120px">-->

    <!--        <el-form-item label="客户类型" prop="customerType">-->
    <!--          <el-select v-model="form.customerType"-->
    <!--                     placeholder="请选择客户类型">-->
    <!--            <el-option v-for="item in customerTypeList"-->
    <!--                       :key="item.customerType"-->
    <!--                       :label="item.customerType"-->
    <!--                       :value="item.value">-->
    <!--            </el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="客户名称" prop="customerName">-->
    <!--          <el-input v-model="form.customerName"></el-input>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="联系人姓名" prop="customerLinkman">-->
    <!--          <el-input v-model="form.customerLinkman"></el-input>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="客户联系电话" prop="customerTel">-->
    <!--          <el-input v-model="form.customerTel"></el-input>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="客户地址" prop="customerAddress">-->
    <!--          <el-input v-model="form.customerAddress"></el-input>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="客户描述" prop="dayLogs">-->
    <!--          <el-input v-model="form.misc" type="textarea" :rows="5"></el-input>-->
    <!--        </el-form-item>-->

    <!--      </el-form>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--    <el-button @click="cancel">取 消</el-button>-->
    <!--    <el-button type="primary" @click="onSubmit">确 定</el-button>-->
    <!--  </span>-->
    <!--    </el-dialog>-->


  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as apiUser from '@/api/user'
  import * as customerManage from '@/api/customer/customerManage'
  import * as leaverManage from '@/api/attendance/leaverManage'
  import * as dayLogs from '@/api/dayLogs/dayLogs'
  import * as myProject from '@/api/projectOa/myProject'
  import * as department from '@/api/system-setting/department'
  import * as position from '@/api/system-setting/position'
  import * as user from '@/api/system-setting/user'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  // 当然你也可以为了方便使用，将它注册到全局
  import { MessageBox } from 'element-ui'
  import bus from '@/utils/eventBus'
  import searchBox from '@/components/searchBox.vue'

  export default {
    name: 'department',
    components: { Pagination, searchBox },
    directives: { waves },
    filters: {},
    data() {
      return {
        list: null,
        total: 0,
        dialogVisible: true,
        dialogVisibleDayLog: false,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          departmentName: '',
          departmentName1: '',
          departmentCode: '',
          positionName: '',
          roleName: '',
          pageSize: 50,
          name: undefined,
          proPersonLiable: undefined,
          proDepartment: undefined,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: []
        },
        departmentList: [],

        usersList: [],
        listParent: [],
        DayLogsList: [],

        calendarData: [
          { day: '2021-09-11', status: '打卡' },
          { day: '2021-09-16', status: '缺勤' },
          { day: '2021-09-20', status: '请假' }
        ],

        form: {},

        customerTypeList: [
          { 'customerType': '企业', 'value': 1 },
          { 'customerType': '个人', 'value': 2 },
          { 'customerType': '其他', 'value': 3 }
        ],

        dialogTitle: '考勤明细',

        rulesList: [
          { label: '管理员', value: '管理员' },
          { label: '言川一级用户', value: '言川一级用户' },
          { label: '言川二级用户', value: '言川二级用户' },
          { label: '言川三级用户', value: '言川三级用户' }

        ],

        rules: {
          customerType: [{ required: true, message: '客户类型必选', trigger: 'blur' }],
          customerName: [{ required: true, message: '客户名称必填', trigger: 'blur' }],
          customerLinkman: [{ required: true, message: '联系人姓名必填', trigger: 'blur' }],
          customerTel: [{ required: true, message: '客户联系电话必填', trigger: 'blur' }],
          customerAddress: [{ required: true, message: '客户地址必填', trigger: 'blur' }]
        }
      }
    },
    computed: {
      ...mapGetters([
        'selectedTenantId',
        'tenantList'
      ])
    },
    created() {
      this.getList()
      // this.getRoleList()
      // this.getDepartmentList()
      // this.getDepartmentList1()

      // 监听 租户改变的事件,选择不同租户后,立马刷新数据
      bus.$on('selectedTenantIdChanged', () => {
        console.log('selectedTenantIdChanged事件触发...')
        this.getList()
      })

    },
    mounted() {
      // 测试用
      // var that = this
      // setTimeout(function() {
      //   that.dialogFormVisible = true
      // }, 5000)

      // alert(this.$store.getters.selectedTenantId);
    },
    beforeDestroy() { // 当路由切换到其他页面时触发
      bus.$off('selectedTenantIdChanged')
    },
    methods: {
      async getList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }

        //获取后端数据
        const { content } = await customerManage.getCustomerManageInfoList(this.listQuery)
        this.list = content.list
        this.total = content.totalCounts
      },

      async getListParent() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }

        //获取后端数据
        const { content } = await myProject.getProjectListParent(this.listQuery)
        this.listParent = content

      },

      async getDepartmentList() { // 获取列表数据

        const { content } = await department.getDepartmentList(this.listQuery)
        this.departmentList = content.list

      },
      async getDepartmentList1() { // 获取列表数据

        const { content } = await department.getDepartmentList(this.listQuery)
        this.departmentList1 = content.list

      },

      async getRoleList() { // 获取列表数据

        const { content } = await department.getRoleList(this.listQuery)
        this.rulesList = content.list

      },
      handleFilter() {
        this.listQuery.pageNumber = 1
        this.getList()
      },

      handleCreate() {
        this.form = {}
        this.dialogVisible = true
        this.dialogTitle = '客户新增'
        this.listQuery = {}
        this.getListParent()
      },
      handleUpdate(row) {
        this.dialogVisible = true
        this.dialogTitle = '客户编辑'
        this.form = row
        this.getListParent()

      },

      handleDelete(row) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          customerManage.deleteCustomerManageInfo(row.id).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
        })

      },

      reset() {
        this.listQuery.customerType = ''
        this.listQuery.customerName = ''
        this.listQuery.customerLinkman = ''
        this.listQuery.customerTel = ''
        this.listQuery.customerAddress = ''
        this.listQuery.misc = ''
        this.getList()
      },
      cancel() {
        this.listQuery.customerType = ''
        this.listQuery.customerName = ''
        this.listQuery.customerLinkman = ''
        this.listQuery.customerTel = ''
        this.listQuery.customerAddress = ''
        this.listQuery.misc = ''
        this.dialogVisible = false
        this.dialogVisibleDayLog = false

      },
      handleClose() {
        this.listQuery.customerType = ''
        this.listQuery.customerName = ''
        this.listQuery.customerLinkman = ''
        this.listQuery.customerTel = ''
        this.listQuery.customerAddress = ''
        this.listQuery.misc = ''
        this.dialogVisible = false
        this.dialogVisibleDayLog = false

      },
      onSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.selectedTenantId

            if (this.dialogTitle == '客户新增') {
              customerManage.createCustomerManageInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.listQuery.customerType = ''
                  this.listQuery.customerName = ''
                  this.listQuery.customerLinkman = ''
                  this.listQuery.customerTel = ''
                  this.listQuery.customerAddress = ''
                  this.listQuery.misc = ''
                  this.dialogVisible = false
                  this.dialogVisibleDayLog = false
                  this.getList()

                }
              })
            } else if (this.dialogTitle == '客户编辑') {
              customerManage.updateCustomerManageInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.listQuery.customerType = ''
                  this.listQuery.customerName = ''
                  this.listQuery.customerLinkman = ''
                  this.listQuery.customerTel = ''
                  this.listQuery.customerAddress = ''
                  this.listQuery.misc = ''
                  this.dialogVisible = false
                  this.dialogVisibleDayLog = false
                  this.getList()

                }
              })
            }

          } else {
            console.log('error submit!!')
            return false
          }
        })

      }
      ,
      async getUsersList() { // 获取列表数据
        this.usersList = []

        const { content } = await user.getUserList(this.listQuery)
        this.usersList = content.list

      },

      async getDayLogsList() { // 获取列表数据
        this.DayLogsList = []

        const { content } = await dayLogs.getDayLogsInfoList(this.form)
        this.DayLogsList = content.list

      },



      onDayLogs(){

        this.dialogVisibleDayLog = true


      }



    }
  }
</script>

<style scoped>
  .app-select {
    margin-bottom: 20px;
  }
</style>
